<template>
	<view class="hbh_container2">
		<headComponent navTitle="更换账号名称" :isBack="true"></headComponent>
		<view class="hbh_box">
			<view class="hbh_tips">
				当前绑定手机号为：{{phone.replace(/(\d{3}).+(\d{4})/,"$1xxxx$2")}}
			</view>
			<SendCode :maxlength="11" :inpType="'text'" :placeholder="'请输入您的新名称'" @sendValue="sendCode">
			</SendCode>
			<SendCode :maxlength="6" :inpType="'number'" :placeholder="'请输入验证码'" @putCode="putCode"
				@sendValue="sendCode2" :isCode="true"></SendCode>
			<view class="hbh_senBtn" @click="handelRequire">
				确认绑定新的手机号
			</view>

		</view>
		<Createcode :titleName="'注册验证码为'" :code="localCode" v-if="isShowCode"></Createcode>
	</view>
</template>

<script>
	import {
		sendCode,
		putCount
	} from "@/api/index.js"
	import SendCode from "@/components/hbhInput/hbhInput.vue"
	import Createcode from "@/components/Createcode/Createcode.vue"
	export default {

		data() {
			return {
				phone: '19136753163',
				newName: "",
				code: "",
				localCode: "",
				isShowCode: false,
				isSecond: true,
				update_time: ""
			};
		},
		components: {
			SendCode,
			Createcode
		},
		onLoad(option) {
			this.phone = option.phone
			this.update_time = option.update_time

		},
		methods: {
			sendCode(val) {
				this.newName = val
			},
			sendCode2(val) {
				this.code = val
			},
			handelRequire() {
				if (!this.newName || !this.code) {
					uni.showToast({
						icon: "error",
						title: "信息填写不全"
					})
				} else {
					if (this.newName.length < 2 || this.code.length < 6) {
						uni.showToast({
							icon: "none",
							title: "信息格式不正确"
						})
					} else {
						if (this.localCode == this.code) {
							let long = Date.parse(new Date()) - new Date(this.update_time).valueOf()
							let oneMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
								.getDate() * 24 * 60 * 60 * 1000
							if (oneMonth < long) {
								putCount({
									user_name: this.newName
								}).then((res) => {
									console.log(res)
									if (res.code == 200) {
										uni.showToast({
											icon: "none",
											title: "修改成功！"
										})

										setTimeout(() => {
											uni.reLaunch({
												url: "/pages/index/index"
											})

										}, 1500)

									}
								}).catch((err) => {
									console.log(err)
								})
							} else {
								uni.showToast({
									icon: "none",
									title: "一个月只能修改一次"
								})
							}


						} else {
							uni.showToast({
								icon: "none",
								title: "验证码错误！"
							})
						}


					}
				}

			},
			//接收验证码
			putCode(val) {
				this.localCode = val
				this.isShowCode = true
				this.timer = setTimeout(() => {
					this.isShowCode = false
					clearTimeout(this.timer)
					this.timer = null
				}, 10000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hbh_tips {
		margin-bottom: 50rpx;
	}

	.hbh_senBtn {
		margin-left: calc(50% - 315rpx);
		margin-top: 100rpx;
		width: 630rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #6ECDFF 0%, #00A7FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
		text-align: center;
		line-height: 90rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>